import React from "react";
import './login.css'
import './reset.css'
export default class App extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            account: '',
            password: '',
            word: false,
            accoun: false,
        }
    }
    componentDidMount() {
        this.clk()
    }
    clk() {
        if (this.state.accoun == false && this.state.word == false) {
            this.$axios
                .post("https://apipc-xiaotuxian-front.itheima.net/login", {
                    account: this.state.account,
                    password: this.state.password,
                })
                .then((res) => {
                    console.log(res);
                    if (res.data.msg == "操作成功") {
                        window.localStorage.setItem('login', res.data.result.token)
                        window.localStorage.setItem('account', res.data.result.account)
                        window.location.href = '/'
                        console.log('登录成功');
                    }
                });
        } else {
            console.log('账号或密码错误');
        }
    }
    acco(e) {
        this.setState({
            account: e.target.value
        })
    }
    pass(e) {
        this.setState({
            password: e.target.value
        })
    }
    blurs() {
        var reg = /^[a-zA-Z][0-9]{6,20}$/
        var res = reg.test(this.state.account)
        if (res == false) {
            this.setState({
                accoun: true
            })
        } else {
            this.setState({
                accoun: false
            })
        }
    }
    bu1() {
        var reg = /^[0-9a-zA-Z]{6,24}$/
        var res = reg.test(this.state.password)
        if (res == false) {
            this.setState({
                word: true
            })
        } else {
            this.setState({
                word: false
            })
        }
    }
    render() {
        return <div>
            <div data-v-37dfd6fc="" id="app">
                <header data-v-37dfd6fc="" className="login-header">
                    <div data-v-37dfd6fc="" className="commonwidth">
                        <h1 data-v-37dfd6fc="" className="logo">
                            <a data-v-37dfd6fc="" href="#!">小兔鲜</a>
                        </h1>
                        <h3 data-v-37dfd6fc="" className="sub">欢迎登录</h3>
                        <a data-v-37dfd6fc="" href="/#/" className="entry">
                            进入网站首页
                            <i data-v-37dfd6fc="" className="iconfont icon-angle-right"></i>
                            <i data-v-37dfd6fc="" className="iconfont icon-angle-right"></i></a>
                    </div>
                </header>
                <section data-v-37dfd6fc="" className="login-section">
                    <div data-v-37dfd6fc="" className="wrapper">
                        <nav data-v-37dfd6fc="">
                            账户登录
                        </nav>
                        <div data-v-37dfd6fc="" className="account-box">
                            <div data-v-37dfd6fc="" className="toggle">
                                <i data-v-37dfd6fc="" className="iconfont icon-envelope-o"></i>
                                使用短信登录

                            </div>
                            <form data-v-37dfd6fc=""
                                noValidate="noValidate"
                                autoComplete="off" className="form">
                                <div data-v-37dfd6fc="" className="form-item">
                                    <div data-v-37dfd6fc="" className="input">
                                        <i data-v-37dfd6fc="" className="iconfont icon-user-o"></i
                                        ><input data-v-37dfd6fc=""
                                            type="text"
                                            placeholder="请输入用户名"
                                            name="account" value={this.state.account}
                                            onChange={this.acco.bind(this)}
                                            onBlur={this.blurs.bind(this)}
                                        />
                                        {this.state.account == '' && <span className="passworing">请输入用户名</span>}
                                        {this.state.account && this.state.accoun && <p className='valworing'>字母开头且6-20个字符</p>}
                                    </div>
                                    {this.state.show && <div className="error" data-v-7453d80e="">
                                        <i className="iconfont icon-warning" data-v-7453d80e=""></i>
                                    </div>}
                                    {this.state.zimu && <div className="error" data-v-7453d80e="">
                                        <i className="iconfont icon-warning" data-v-7453d80e=""></i> 字母开头且6-20个字符
                                    </div>}
                                </div>
                                <div data-v-37dfd6fc="" className="form-item">
                                    <div data-v-37dfd6fc="" className="input">
                                        <i data-v-37dfd6fc="" className="iconfont icon-lock8"></i
                                        ><input
                                            data-v-37dfd6fc=""
                                            type="password"
                                            placeholder="请输入密码"
                                            name="password" value={this.state.password}
                                            onChange={this.pass.bind(this)}
                                            onBlur={this.bu1.bind(this)}
                                        />
                                        {this.state.password == '' && <span className="passworing">请输入密码</span>}
                                        {this.state.password && this.state.word && <span className="passworing"> 密码6-24个字符</span>}
                                    </div>
                                    {this.state.show1 && <div className="error" data-v-7453d80e="">
                                        <i className="iconfont icon-warning" data-v-7453d80e=""></i>
                                    </div>}
                                    {this.state.mima && <div className="error" data-v-7453d80e="">
                                        <i className="iconfont icon-warning" data-v-7453d80e=""></i>  密码6-24个字符
                                    </div>}
                                </div>
                                <div data-v-37dfd6fc="" className="form-item">
                                    <div data-v-37dfd6fc="" className="agree">
                                        <span data-v-37dfd6fc="">我已同意</span>《隐私条款》<span data-v-37dfd6fc="">和</span>《服务条款》
                                    </div>
                                </div>
                                <div className="btn" onClick={this.clk.bind(this)}>登录</div>
                            </form>
                            <div data-v-37dfd6fc="" className="action">
                                <a data-v-37dfd6fc=""
                                    href="https://graph.qq.com/oauth2.0/authorize?client_id=101941968&amp;response_type=token&amp;scope=all&amp;redirect_uri=http%3A%2F%2Ferabbit.itheima.net%2F%23%2Flogin%2Fcallback"><img
                                        data-v-37dfd6fc=""
                                        src="https://qzonestyle.gtimg.cn/qzone/vas/opensns/res/img/Connect_logo_7.png"
                                        alt="" /></a>
                                <div data-v-37dfd6fc="" className="url">
                                    忘记密码免费注册
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
                <footer data-v-37dfd6fc="" className="login-footer">
                    <div data-v-37dfd6fc="" className="commonwidth">
                        <p data-v-37dfd6fc="">
                            <a data-v-37dfd6fc="" href="#!">关于我们</a
                            ><a data-v-37dfd6fc="" href="#!">帮助中心</a
                            ><a data-v-37dfd6fc="" href="#!">售后服务</a
                            ><a data-v-37dfd6fc="" href="#!">配送与验收</a
                            ><a data-v-37dfd6fc="" href="#!">商务合作</a
                            ><a data-v-37dfd6fc="" href="#!">搜索推荐</a
                            ><a data-v-37dfd6fc="" href="#!">友情链接</a>
                        </p>
                        <p data-v-37dfd6fc="">CopyRight © 小兔鲜儿</p>
                    </div>
                </footer>
            </div>
        </div>
    }
}